<template>
  <div class="app-container calendar-list-container">
    <!-- filter 条件查询 -->
    <div class="filter-container" style="overflow:hidden">
      <el-button
          type="primary"
          v-waves
          icon="el-icon-circle-plus-outline"
          class="filter-item"
          @click="dialog.add = true"
          style="margin-top:7px;"
        >新增</el-button>
      <!-- <el-button  type='primary' class="filter-item" style="width: 80px;margin-right:15px;margin-top:7px" @click="handleDownload"  icon="el-icon-download"  :loading="downloadLoading">导出</el-button> -->
    </div>
        <!--表格 -->
          <el-table :data="list" element-loading-text="给我一点时间" v-loading="loading.list" border fit highlight-current-row style="width: 100%">
            <el-table-column align="center" label="序号" prop="index" />
            <el-table-column prop="malfunctionContent" label="问题类型"  align="center" /> 
            <el-table-column label="操作" class-name="small-padding fixed-width" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="del(scope.row.malfunctionId)"
          >删除</el-button>
        </template>
      </el-table-column>       
          </el-table>
        <!-- pagination 分页 -->
        <div class="pagination-container">
          <el-pagination 
          background 
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange" 
          :current-page="listQuery.offset" 
          :page-sizes="[10, 20, 30, 40]" 
          :page-size="listQuery.limit" 
          layout="total, sizes, prev, pager, next, jumper" 
          :total="total">
          </el-pagination>
        </div>
    <!-- 回到顶部 -->
    <BackToTop></BackToTop>

        <el-dialog title="新增问题类型" :visible.sync="dialog.add" width="600px">
      <el-form
        :model="addQuery"
        :rules="addRules"
        ref="addRecorName"
        label-position="right"
        label-width="140px"
      >
        <el-form-item label="问题类型" prop="malfunctionContent">
          <el-input v-model="addQuery.malfunctionContent" placeholder="请输入问题类型" style="width:350px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="loading.add" @click="add2">确定</el-button>
        <el-button type="primary" @click="dialog.add = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { recordTypeList,addOrupdateRecordType,deleteRecordType } from '@/api/recordType'
import BackToTop from '@/components/BackToTop'
import { parseTime } from '@/utils'
export default {
  name: 'system_recordType',
  components: {
    BackToTop
  },
  data() {
   return {
      loading: {
        list: false,
        add:false
      },
      dialog:{ add:false},
      addQuery:{malfunctionContent:''},
      total: 0,
      listQuery: {
        offset: 1,
        limit: 10
      },
      addRules: {
        recorName: [
          { validator: true, message: "请输入问题类型", trigger: "blur" },
          { min: 1, max: 8, message: "长度在 1 到 8 个字符", trigger: "blur" }
        ]
      },   
      list:null,
    }
  },
 
  created() {
    this.getList()
  },
  methods: {
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
      if (j === 'cTime') {
      return parseTime(v[j])
      } else {
      return v[j]
      }
      }))
    },
    //获取反馈列表
    async getList() {
      this.loading.list = true
      try {
        const { data } = await recordTypeList(this.listQuery)
      this.list = data.records.map((item, index) => ({index: index + 1, ...item}))
        this.total = data.total
      } catch (error) {       
      }
      this.loading.list = false 
  
    },
     //提交新增
    async add2() {
      this.$refs["addRecorName"].validate(async valid => {
        if (valid) {
          this.loading.add = true;
          try {
            const data = await addOrupdateRecordType(this.addQuery);
            if (data.code == 1) {
              this.$message.success("新增成功！");
              this.dialog.add = false;
              this.$refs["addRecorName"].resetFields();
              this.getList();
            }
          } catch (error) {}
          this.loading.add = false;
        }
      });
    },
   //删除
    async del(malfunctionId) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const { data } = await deleteRecordType({ malfunctionId });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.getList();
        })
        .catch(() => {});
    },
    handleFilter() {
      this.listQuery.offset = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.offset = val
      this.getList()
    },
    //将时间戳转化成日期字符串
    formatDate(date, offset){
        if(date && typeof date  == 'object' ){
            const d = date[offset];
            return new Date(d).getTime()
        }
        return ''
    },
  }, 
  computed: {
    //请求的过滤条件
        filtersCondition(){
            return {
                userPhone: this.listQuery.userPhone,
                userType: Number(this.listQuery.userType),
                startTime:this.formatDate(this.listQuery.date,0),
                endTime: this.formatDate(this.listQuery.date, 1),
                offset: this.listQuery.offset,
                limit: this.listQuery.limit,
            }
        },
  }
}
</script>
<style lang="scss" scoped>
  /deep/   .el-carousel__container{
  height:500px !important;
}
  
</style>
